<template>
    <div class="scenic-spot-container">
        <div class="filter-container">
            <el-input v-model="listQuery.title" placeholder="景点名称" style="width: 200px;" class="filter-item"
                @keyup.enter.native="handleFilter" />
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleCreate">
                新增景点
            </el-button>
        </div>

        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
            <el-table-column align="center" label="ID" width="95">
                <template slot-scope="scope">
                    {{ scope.row.id }}
                </template>
            </el-table-column>
            <el-table-column label="景点图片" width="200">
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :src="scope.row.coverImage" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column label="景点名称" align="center">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column label="景点等级" align="center">
                <template slot-scope="scope">
                    {{ scope.row.level }}
                </template>
            </el-table-column>
            <el-table-column label="地址" align="center">
                <template slot-scope="scope">
                    {{ scope.row.address }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
                <template slot-scope="{row}">
                    <el-button type="primary" size="mini" @click="handleDetail(row)">
                        详情
                    </el-button>
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="getList" />

        <!-- 新增/编辑对话框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px">
                <el-form-item label="景点名称" prop="title">
                    <el-input v-model="temp.title" />
                </el-form-item>
                <el-form-item label="景点图片" prop="images">
                    <el-upload action="/api/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-success="handleImageListSuccess" :file-list="temp.images">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="景点等级" prop="level">
                    <el-input v-model="temp.level" placeholder="请输入景点等级" />
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="temp.address" />
                </el-form-item>
                <el-form-item label="景点介绍" prop="introduction">
                    <el-input v-model="temp.introduction" type="textarea" :rows="4" placeholder="请输入景点介绍" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="temp.status" :active-value="1" :inactive-value="0" active-text="启用"
                        inactive-text="禁用" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">
                    取消
                </el-button>
                <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
                    确定
                </el-button>
            </div>
        </el-dialog>

        <!-- 详情对话框 -->
        <el-dialog title="景点详情" :visible.sync="detailDialogVisible" width="70%">
            <el-tabs v-model="activeTab">
                <el-tab-pane label="基本信息" name="basic">
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="景点名称">{{ detail.title }}</el-descriptions-item>
                        <el-descriptions-item label="景点等级">{{ getLevelText(detail.level) }}</el-descriptions-item>
                        <el-descriptions-item label="地址">{{ detail.address }}</el-descriptions-item>
                        <el-descriptions-item label="状态">
                            <el-tag :type="detail.status === 1 ? 'success' : 'danger'">
                                {{ detail.status === 1 ? '启用' : '禁用' }}
                            </el-tag>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="景点介绍" name="introduction">
                    <el-input v-model="detail.introduction" type="textarea" :rows="6" placeholder="请输入景点介绍" />
                </el-tab-pane>
                <el-tab-pane label="相关故事" name="stories">
                    <el-input v-model="detail.stories" type="textarea" :rows="6" placeholder="请输入相关故事" />
                </el-tab-pane>
                <el-tab-pane label="图片管理" name="images">
                    <el-upload action="/api/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove" :on-success="handleImageListSuccess">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="saveDetail">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
    name: 'ScenicSpot',
    components: { Pagination },
    data() {
        return {
            list: [],
            listLoading: true,
            total: 0,
            listQuery: {
                page: 1,
                limit: 10,
                title: ''
            },
            dialogVisible: false,
            dialogStatus: '',
            dialogTitle: '',
            detailDialogVisible: false,
            activeTab: 'basic',
            dialogImageUrl: '',
            temp: {
                id: undefined,
                title: '',
                images: [],
                level: '',
                address: '',
                introduction: '',
                status: 1
            },
            detail: {
                id: undefined,
                title: '',
                level: 1,
                address: '',
                status: 1,
                introduction: '',
                stories: '',
                images: []
            },
            rules: {
                title: [{ required: true, message: '请输入景点名称', trigger: 'blur' }],
                images: [{ required: true, message: '请上传景点图片', trigger: 'change' }],
                level: [{ required: true, message: '请输入景点等级', trigger: 'blur' }],
                address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
                introduction: [{ required: true, message: '请输入景点介绍', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'change' }]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            // TODO: 调用后端API获取景点列表
            // const { data, total } = await getScenicSpotList(this.listQuery)
            // this.list = data
            // this.total = total
            this.list = [
                {
                    id: 1,
                    title: '测试景点1',
                    coverImage: 'https://example.com/image1.jpg',
                    level: '5A',
                    address: '河南省郑州市',
                    status: 1
                }
            ]
            this.total = 1
            this.listLoading = false
        },
        handleFilter() {
            this.getList()
        },
        resetTemp() {
            this.temp = {
                id: undefined,
                title: '',
                images: [],
                level: '',
                address: '',
                introduction: '',
                status: 1
            }
        },
        handleCreate() {
            this.resetTemp()
            this.dialogStatus = 'create'
            this.dialogTitle = '新增景点'
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        handleUpdate(row) {
            this.temp = Object.assign({}, row)
            this.dialogStatus = 'update'
            this.dialogTitle = '编辑景点'
            this.dialogVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
            })
        },
        async createData() {
            this.$refs['dataForm'].validate(async (valid) => {
                if (valid) {
                    // TODO: 调用后端API创建景点
                    // await createScenicSpot(this.temp)
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '创建成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            })
        },
        async updateData() {
            this.$refs['dataForm'].validate(async (valid) => {
                if (valid) {
                    // TODO: 调用后端API更新景点
                    // await updateScenicSpot(this.temp)
                    this.dialogVisible = false
                    this.$notify({
                        title: '成功',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.getList()
                }
            })
        },
        async handleDelete(row) {
            this.$confirm('确认删除该景点吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // TODO: 调用后端API删除景点
                // await deleteScenicSpot(row.id)
                this.$notify({
                    title: '成功',
                    message: '删除成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            })
        },
        handleDetail(row) {
            this.detail = Object.assign({}, row)
            this.detailDialogVisible = true
            this.activeTab = 'basic'
        },
        async saveDetail() {
            // TODO: 调用后端API保存景点详情
            // await updateScenicSpotDetail(this.detail)
            this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000
            })
            this.detailDialogVisible = false
            this.getList()
        },
        handleImageListSuccess(res, file) {
            this.temp.images.push({
                name: file.name,
                url: res.url
            })
        },
        handleRemove(file, fileList) {
            // TODO: 调用后端API删除图片
            // await deleteImage(file.url)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        getLevelText(level) {
            const levelMap = {
                1: '5A',
                2: '4A',
                3: '3A',
                4: '2A',
                5: 'A'
            }
            return levelMap[level] || '未知'
        },
        getLevelTagType(level) {
            const typeMap = {
                1: 'danger',
                2: 'warning',
                3: 'success',
                4: 'info',
                5: ''
            }
            return typeMap[level] || ''
        }
    }
}
</script>

<style scoped>
.scenic-spot-container {
    padding: 20px;
}

.filter-container {
    padding-bottom: 10px;
}

.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style> 